import React from 'react';
import {inject, observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Echarts , Icon , Tools } from 'weaver-mobile';
import QrcodeURL from './../img/qr.png';
const getLabel = Tools.getLabel;

@inject('viewMeetingStore')
@withRouter
@observer
class EChartsPie extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        option : {
          tooltip: {
            show: false,
          },
          legend: {
            show: true,
  
          },
          title:{
            text:'',
            padding:[20,0,0,20]
          },
          series: [
              {
                  name:'',
                  type:'pie',
                  radius: ['50%', '60%'],
                  //是否启用防止标签重叠策略
                  avoidLabelOverlap: false,
                  //是否为顺时针
                  clockwise:false,
                  //是否开启 hover 在扇区上的放大动画效果。
                  hover:false,
                  hoverAnimation:false,
                  label: {
                      normal: {
                          show: true,
                          position: 'center',
                          formatter: 
                            ( data ) => {
                              return `{gray|${getLabel(2166, '应到人数')}}\n{green|${data.seriesName}}`;
                            },
                          rich: {
                            gray: {
                                fontSize:12,
                                color: '#868686'
                            },
                            green: {
                                color: '#333333',
                                fontSize:30,
                                fontWeight:500,
                            }
                          },
                      },
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
                  data:[],
                  color:[]
              }
          ],
        },
        signOutOption : {
          tooltip: {
            show: false,
          },
          legend: {
            show: true,
  
          },
          title:{
            text:'',
            padding:[20,0,0,20]
          },
          series: [
              {
                  name:'',
                  type:'pie',
                  radius: ['50%', '60%'],
                  //是否启用防止标签重叠策略
                  avoidLabelOverlap: false,
                  //是否为顺时针
                  clockwise:false,
                  //是否开启 hover 在扇区上的放大动画效果。
                  hover:false,
                  hoverAnimation:false,
                  label: {
                      normal: {
                          show: true,
                          position: 'center',
                          formatter: 
                            ( data ) => {
                              return `{gray|${getLabel('510281','应签退人数') }}\n{green|${data.seriesName}}`;
                            },
                          rich: {
                            gray: {
                                fontSize:12,
                                color: '#868686'
                            },
                            green: {
                                color: '#333333',
                                fontSize:30,
                                fontWeight:500,
                            }
                          },
                      },
                  },
                  labelLine: {
                      normal: {
                          show: false
                      }
                  },
                  data:[],
                  color:[]
              }
          ],
        },
      };
    }

    componentDidMount() {
      const {count,type } = this.props
      let option = this.state.option;
      option.title.text = type==='sign'?getLabel(391084, '签到情况'):type==='hrm'?getLabel(2106, '参会人员'):getLabel(2167, '参会客户');
      option.series[0].name=type==='sign'?count.allMember:type==='hrm'?count.allAttend:count.allCrmAttend;
      option.series[0].color = [];
      option.series[0].data = [];
      if((type==='sign'||type==='hrm')&&count&&count.attend>=0){
        option.series[0].color.push('#55B1F9')
        option.series[0].data.push({value:count.attend})
      }
      if((type==='sign'||type==='hrm')&&count&&count.unAttend>=0){
        option.series[0].color.push('#FE9900')
        option.series[0].data.push({value:count.unAttend})
      }
      if((type==='sign'||type==='hrm')&&count&&count.unWrite>=0){
        option.series[0].color.push('#EEEEEE')
        option.series[0].data.push({value:count.unWrite})
      }
      if(type==='crm'&&count&&count.crmAttend>=0){
        option.series[0].color.push('#55B1F9')
        option.series[0].data.push({value:count.crmAttend})
      }
      if(type==='crm'&&count&&count.crmUnAttend>=0){
        option.series[0].color.push('#FE9900')
        option.series[0].data.push({value:count.crmUnAttend})
      }
      if(type==='crm'&&count&&count.crmUnWrite>=0){
        option.series[0].color.push('#EEEEEE')
        option.series[0].data.push({value:count.crmUnWrite})
      }
      this.setState({option},()=>{
        this.refs.chart.paint();
      });

    }

    componentWillReceiveProps(nextProps) {
      const {count,type } = nextProps
      let option = this.state.option;
      option.title.text = type==='sign'?getLabel(391084, '签到情况'):type==='hrm'?getLabel(2106, '参会人员'):getLabel(2167, '参会客户');
      option.series[0].name=type==='sign'?count.allMember:type==='hrm'?count.allAttend:count.allCrmAttend;
      option.series[0].color = [];
      option.series[0].data = [];
      if((type==='sign'||type==='hrm')&&count&&count.attend>=0){
        option.series[0].color.push('#55B1F9')
        option.series[0].data.push({value:count.attend})
      }
      if((type==='sign'||type==='hrm')&&count&&count.unAttend>=0){
        option.series[0].color.push('#FE9900')
        option.series[0].data.push({value:count.unAttend})
      }
      if((type==='sign'||type==='hrm')&&count&&count.unWrite>=0){
        option.series[0].color.push('#EEEEEE')
        option.series[0].data.push({value:count.unWrite})
      }
      if(type==='crm'&&count&&count.crmAttend>=0){
        option.series[0].color.push('#55B1F9')
        option.series[0].data.push({value:count.crmAttend})
      }
      if(type==='crm'&&count&&count.crmUnAttend>=0){
        option.series[0].color.push('#FE9900')
        option.series[0].data.push({value:count.crmUnAttend})
      }
      if(type==='crm'&&count&&count.crmUnWrite>=0){
        option.series[0].color.push('#EEEEEE')
        option.series[0].data.push({value:count.crmUnWrite})
      }
      this.setState({option},()=>{
        this.refs.chart.paint();
      });
    }

    onSignClick = (type, signType) => {
      const { pieCallBack,viewMeetingStore } = this.props
      if (signType && signType === 'signout') { // 签退
        viewMeetingStore.setState({isSignOut: true}, () => pieCallBack(type));
      } else {
        viewMeetingStore.setState({isSignOut: false}, () => pieCallBack(type));
      }
    }

    getSignOutEcharts = () => {
      const {count,type,pieCallBack,qrCode } = this.props
      let {signOutOption} = this.state;
      signOutOption.title.text = getLabel('510320','签退情况');
      signOutOption.series[0].name= count.attend;
      signOutOption.series[0].color = ['#A17EF5', '#EEEEEE'];
      signOutOption.series[0].data = [{ value: count.signBackCount },{ value: count.attend-count.signBackCount }];
      if ((count && count.attend == 0) || count.allowSignBack !=1) return;
      return(
        <div className={'eCharts-pie-container'}>
          <div className={'eCharts-pie-container-list'}>
            <div className={'eCharts-pie-detail'}>
              <div className={'eCharts-pie-div'} onClick={()=>this.onSignClick(0, 'signout')}>
                <Echarts ref='signoutChart' option={signOutOption} useDefault={false}/>
              </div>
            </div>
            
            {<div className={'echartDetailDiv'}>
              <table>
                <tbody>
                  <tr>
                    {count&&count.signBackCount>=0&& <td className={'attend'} style={{ color: '#A17EF5'}} onClick={()=>this.onSignClick(1, 'signout')}>
                    <span>{count.signBackCount}</span>
                    <span className={'letterShow'}>{getLabel('129013','已签退') }</span>
                    </td> }

                    {count&&(count.attend-count.signBackCount)>=0&& <td className={'unWrite'} onClick={()=>this.onSignClick(3, 'signout')}>
                    <span>{count.attend-count.signBackCount}</span>
                    <span className={'letterShow'}>{getLabel('382725','未签退')}</span>
                    </td> }
                  </tr>
                </tbody>
              </table>
            </div>}
          </div>
        </div>
      );
    }

    render() {
      const {count,type,pieCallBack,qrCode } = this.props
      const {option} = this.state;
      return (
      <div>
        <div className={'eCharts-pie-container'}>
          {type==='sign'&&
            <div className={'signTop'}></div>
          }
          <div className={'eCharts-pie-container-list'}>
            {type==='sign'&&qrCode&&
              <div>
                <div className={'eCharts-qrcode-div'} onClick={()=>pieCallBack('qrcode')}>
                  <span>{getLabel('129712','会议二维码')}</span>
                  <span className={'imageSpan'}><img src={QrcodeURL} alt={''}/><Icon type={'right'} /></span>
                </div>
              </div>
            }
            <div className={'eCharts-pie-detail'}>
              <div className={'eCharts-pie-div'} onClick={()=>this.onSignClick(0)}>
                <Echarts ref="chart" option={option} useDefault={false} chartAction={this.chartAction}/>
              </div>
            </div>
            
            {<div className={'echartDetailDiv'}>
              <table>
                  {(type==='hrm' || type==='crm')&&<col width="33%"/>}
                  {(type==='hrm' || type==='crm')&&<col width="33%"/>}
                  {(type==='hrm' || type==='crm')&&<col width="34%"/>}
                  {type==='sign'&&<col width="50%"/>}
                  {type==='sign'&&<col width="50%"/>}
                <tbody>
                <tr>
                  {count&&count.attend>=0&& <td className={'attend'}  onClick={()=>this.onSignClick(1)}>
                  <span>{type==='crm'?count.crmAttend:count.attend}</span>
                  <span className={'letterShow'}>{type==='sign'?getLabel(129011, '已签到'):getLabel(391078, '确定参加')}</span>
                  </td> }
                  {count&&count.unAttend>=0&& <td className={'unAttend'} onClick={()=>this.onSignClick(2)}>
                  <span>{type==='crm'?count.crmUnAttend:count.unAttend}</span>
                  <span className={'letterShow'}>{getLabel(389541, '不参加')}</span>
                  </td> }
                  {count&&count.unWrite>=0&& <td className={'unWrite'} onClick={()=>this.onSignClick(3)}>
                  <span>{type==='crm'?count.crmUnWrite:count.unWrite}</span>
                  <span className={'letterShow'}>{type==='sign'?getLabel(129648, '未签到'):getLabel(391079, '未提交回执')}</span>
                  </td> }
                </tr>
                </tbody>
              </table>
            </div>}
          
            {type==='hrm'&&count&&count.otherCount>0&&
              <div>
                <div className={'eCharts-qrcode-div'} onClick={()=>pieCallBack('otherHrm')}>
                  <span>{count.otherCount}{getLabel(391085, '个其他参会人员')}</span>
                  <span className={'imageSpan'}><Icon type={'right'} /></span>
                </div>
              </div>
            }
            {type==='crm'&&count&&count.crmOtherCount>0&&
              <div>
                <div className={'eCharts-qrcode-div'} onClick={()=>pieCallBack('otherCrm')}>
                  <span>{count.crmOtherCount}{getLabel(391086, '个外部人员')}</span>
                  <span className={'imageSpan'}><Icon type={'right'} /></span>
                </div>
              </div>
            }
          </div>
        </div>

        {type==='sign'&&this.getSignOutEcharts()}
      </div>
      )
    }


    chartAction = (chart) => {
      chart.off('click');
      chart.on('click', (params) => {
        const { history , type } = this.props;
        const { setState  } = this.props.viewMeetingStore;
        if(type === 'sign'){
          history.push("/calendar/detail/sign/signData/allMember");
          setState({signPage:0});
          sessionStorage.setItem('meetingSignNowTab',0)
        } else if(type === 'hrm'){
          history.push("/calendar/detail/member/memberData/allMember");
          setState({memberPage:0,memberType:1})
          sessionStorage.setItem('meetingMemberNowTab',0)
          sessionStorage.setItem('meetingMemberType',1)
        } else if(type === 'crm'){
          history.push("/calendar/detail/member/crmData/allMember");
          setState({memberPage:0,memberType:2})
          sessionStorage.setItem('meetingMemberNowTab',0)
          sessionStorage.setItem('meetingMemberType',2)
        }
        
      });
    }
}

export default EChartsPie;